<template>

  <div class="main">
    <el-dialog
      title="驳回原因"
      :visible.sync="resonDialogVisible"
      width="50%">
      <div style="font-size:18px;color:red">{{myReson}}</div>

      </el-dialog>
    <!-- 学校详情 -->
           <el-dialog
  title="学校信息"
  :visible.sync="schoolInfoDisplay"
  width="50%">
  <div class="details">
      <div class="detail-l">
        <div class="imgDiv" style="width:200px;height:200px"><img style="width:100%;height:100%" :src="evUrl+schoolInfoDetails.s_pic" alt="暂无图片"/></div>
        <span>认证状态:</span>
        <el-tag>{{schoolInfoDetails.e_status==2? '认证通过':'未认证'}}</el-tag>
      </div>
      <div class="detail-r">
        <ul class="iteminfo" style="font-size:20px">
          <li style='list-style:none;margin-bottom:5px'>学校名称：{{schoolInfoDetails.s_realName}}</li>
          <li style='list-style:none;margin-bottom:5px'>手机号码：{{schoolInfoDetails.s_phone}}</li>
          <li style='list-style:none;margin-bottom:5px'>电子邮箱：{{schoolInfoDetails.s_email}}</li>
          <li style='list-style:none;margin-bottom:5px'>学校地址：{{schoolInfoDetails.s_addr}}</li>
          <li style='list-style:none'>学校简介：{{schoolInfoDetails.s_introduction}}</li>
        </ul>
      </div>
     </div>
</el-dialog>
<el-dialog
  title="项目信息"
  :visible.sync="dialogVisible"
  width="50%">
  <div class="itemArea"  style="font-size:18px">
    <div class="top" style="display:flex;justify-content:space-around">
      <div class="top-l" style="width:200px;height:200px">
        <img style="width:100%;height:100%" :src="evUrl+form.item_pic"/>
      </div>
      <div class="top-r" style="padding-top:18px;margin-bottom:10px">
        <div style="margin-bottom:10px">活动标题：{{form.item_tit}}</div>
        <div style="margin-bottom:10px">服务时长：{{form.service_time}}</div>
        <div style="margin-bottom:10px">联系人：{{form.contacts}}</div>
        <div style="margin-bottom:10px">手机号码：{{form.phone}}</div>
        <div style="margin-bottom:10px">岗位名称：{{form.station}}</div>
        <div style="margin-bottom:10px">岗位人数：{{form.num}}</div>
        <div style="margin-bottom:10px">活动地址：{{form.addr}}</div>
        <div style="margin-bottom:10px">活动描述：{{form.item_describe}}</div>
        <div style="margin-bottom:10px">报名开始时间：{{form.startTime}}</div>
        <div style="margin-bottom:10px">报名截止时间：{{form.endTime}}</div>
        <div>活动类型：{{form.item_type}}</div>
      </div>
    </div>
  </div>
</el-dialog>

     <el-dialog
       title="面试信息"
      :visible.sync="infoShow"
      width="60%">
      <div style="margin-bottom:8px;font-size:18px">面试形式：{{nowRow.iStyle}}</div>
      <div style="margin-bottom:8px;font-size:18px">面试时间：{{nowRow.iTime}}</div>
      <div v-if="nowRow.iAddr" style="margin-bottom:8px">面试地点：{{nowRow.iAddr}}</div>
      <el-button size="mini" v-if="nowRow.iStatus==1" @click="noProblem" type="primary">确认</el-button>
      <el-button size="mini" disabled v-if="nowRow.iStatus==2" type="primary">已经确认</el-button>

     </el-dialog>
    <div class="table_area">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="recordId"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          width="180"
          label="学校信息">
          <template slot-scope="scope">
              <el-button icon="el-icon-view" size="mini" @click="schoolInfo(scope.row)"></el-button>
          </template>
      </el-table-column>
        <el-table-column
                    prop="exaStatus"
                    label="审核状态">
                    <template slot-scope="scope">
                      <span>{{exaStatus(scope.row.exaStatus)}}</span>
                    </template>
                </el-table-column>
        <el-table-column
          label="项目详情"
          width="180">
          <template slot-scope="scope">
              <el-button size="mini" @click="handleRead(scope.row)">查看</el-button>
          </template>
      </el-table-column>
      <el-table-column
          prop="ch_reson"
          label="备注">
          <template slot-scope="scope">
              <el-button v-if="scope.row.ch_reson" size="mini" icon="el-icon-tickets" @click="exaReson(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
              <el-button v-if="scope.row.iStatus==1 || scope.row.iStatus==2" @click="chatInfo(scope.row)" size="mini">面试信息</el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="180">
          <template slot-scope="scope">
              <el-button v-if="!scope.row.exaStatus || scope.row.exaStatus=='0'" size="mini" @click="deleteOpt(scope.row)">撤销</el-button>
              <el-button v-if="scope.row.exaStatus=='1'" size="mini" @click="acceptOffer(scope.row)">接受</el-button>
              <el-button v-if="scope.row.exaStatus=='1'" size="mini" @click="rejectOffer(scope.row)">拒绝</el-button>
              <el-button v-if="scope.row.exaStatus=='4'" size="mini" type="info" disabled>已拒绝</el-button>
              <el-button v-if="scope.row.exaStatus=='3'" size="mini" type="info" disabled>已接受</el-button>
              <el-button v-if="scope.row.exaStatus=='3' ||scope.row.exaStatus=='2'" type="danger"  size="mini" @click="deleteOpt(scope.row)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
import { getRecordList, getAtivityd, deleteMyCount, takeOk, acceptReject } from '../api/record.js'
import { getSchoolDetails } from '../api/index'
export default {
  methods: {
    // 学校信息
    schoolInfo (row) {
      this.schoolInfoDisplay = true
      getSchoolDetails({ sId: row.s_id }).then(({ data }) => {
        // console.log(data)
        this.schoolInfoDetails = data.info

        // console.log(data)
        // console.log(this.schoolInfoDetails)
      })
    },

    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    getMyRecord () {
      const tid = JSON.parse(window.localStorage.getItem('userInfo')).t_id
      // console.log(tid)
      getRecordList({ params: { tid } }).then(({ data }) => {
        this.tableData = data.list
      })
    },
    handleRead (row) {
      this.dialogVisible = true
      getAtivityd({ iId: row.itemId }).then(({ data }) => {
        this.form = JSON.parse(JSON.stringify(data.list))
        this.form.activityTime = [data.list.startTime, data.list.endTime]
        const endTime = Date.parse(data.list.endTime)
        const nowTime = Date.parse(new Date())
        if (endTime <= nowTime) {
          this.form.status = '活动已经结束'
        } else {
          this.form.status = '进行中！'
        }
      })
      // console.log(row.itemId)
    },
    exaStatus (status) {
      if (status === '0' || status == null) {
        return '待审核'
      } else if (status === '2') {
        return '不通过'
      } else {
        return '已通过'
      }
    },
    // 撤销以及删除操作
    deleteOpt (row) {
      deleteMyCount({ recordId: row.recordId }).then(({ data }) => {
        this.$message.info(data.message)
        this.getMyRecord()
      })
    },
    // 面试信息
    chatInfo (row) {
      this.nowRow = row
      this.infoShow = true
      // console.log(row)
    },
    // 确认面试
    noProblem () {
      takeOk({ thisId: this.nowRow.id }).then(({ data }) => {
        this.nowRow.iStatus = '2'
        // console.log(data)
      })
    },
    // 接受offer
    acceptOffer (row) {
      // console.log('接受offer', row)
      acceptReject({ id: row.recordId, val: '3', t_id: row.t_id, itemId: row.itemId, s_id: row.s_id }).then(({ data }) => {
        // console.log(data)
        if (data.status === 200) {
          this.$message.success(data.message)
          this.getMyRecord()
        } else if (data.status === -999) {
          this.$message.info(data.message)
        }
      })
    },
    // 拒绝offer
    rejectOffer (row) {
      // console.log(row)
      acceptReject({ id: row.recordId, val: '4' }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.info(data.message)
          this.getMyRecord()
        }
      })
    },
    exaReson (row) {
      this.myReson = row.ch_reson
      this.resonDialogVisible = true
    }

  },
  data () {
    return {
      evUrl: this.$evUrl,
      tableData: [],
      dialogVisible: false,
      resonDialogVisible: false,
      schoolInfoDetails: {},
      myReson: '',
      // schoolInfo: {},
      infoShow: false,
      schoolInfoDisplay: false,
      nowRow: {},
      form: {
      }
    }
  },
  mounted () {
    this.getMyRecord()
  }

}
</script>
